import { Demo1Component } from './demo1/demo1.component';
import { AsyncComponent } from './async/async.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { PositionComponent } from './position/position.component';
import { SizeComponent } from './size/size.component';
import { ModalityComponent } from './modality/modality.component';

export const DrawerConfig = {
  location: 'Drawer',
  description: `抽屉从父窗体边缘滑出的窗口，覆盖住部分父窗体内容能有效利用屏幕的水平空间，支持查看信息量较大的对象概要详情，也支持交互步骤比较多的表单填写以及配置类操作。
  用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。分为模态窗口和非模态窗口两种形式。
  推荐尺寸：不超过屏幕的70%，右侧浮层窗口建议尺寸为416、608、896、1232px。`,
  description_en: `According to the design specifications, the overall layout of the page level needs to be completed soon.
	Layout is a sematic tag, which has clearer page structure and free combination of modules to meet a variety of layouts.
	Basic styles of the default header and the left menu encapsulate the collapsing-expanding function of lv-sider, and the content can be freely matched.
	`,
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/drawer/demo1/demo1.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic',
      demoDescription: ``,
      demoDescription_en: ``,
    },
    {
      demo: AsyncComponent,
      codePath: 'showcase/drawer/async/async.component',
      demoTitle: '异步事件',
      demoTitle_en: 'Asynchronous event',
      demoDescription: ``,
      demoDescription_en: ``,
    },
    {
      demo: ModalityComponent,
      codePath: 'showcase/drawer/modality/modality.component',
      demoTitle: '非模态抽屉',
      demoTitle_en: 'Non modal Drawer',
      demoDescription: `非模态抽屉，可以点击外部空白处。`,
      demoDescription_en: `Non modal drawer, you can click on the external blank space`,
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/drawer/demo3/demo3.component',
      demoTitle: '多级弹窗',
      demoTitle_en: 'Multi-level Modal',
      demoDescription: '多层级无遮罩弹窗，点击空白处可以关闭弹窗。通过 lvParentModalKeys 指定多级弹窗的关系。',
      demoDescription_en:
        'Multi-level modals without masks. You can click the blank area to close the modal. lvParentModalKeys specifies the relationship between multi-level modals.',
      devDebug: true,
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/drawer/demo4/demo4.component',
      demoTitle: '偏移弹窗',
      demoTitle_en: 'Offset',
      demoDescription: '',
      demoDescription_en: '',
      devDebug: true,
    },
    {
      demo: PositionComponent,
      codePath: 'showcase/drawer/position/position.component',
      demoTitle: '方向',
      demoTitle_en: 'Position',
      demoDescription: '用于信息浏览、信息采集等辅助性操作，支持从四个方向抽出。',
      demoDescription_en:
        'Modal can be used for information browse, information collection and other auxiliary operations, and supports extraction from four directions.',
      devDebug: true,
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/drawer/size/size.component',
      demoTitle: '尺寸',
      demoTitle_en: 'Size',
      demoDescription: '不同尺寸的滑窗',
      demoDescription_en:
        'Drawer of different sizes',
    },
  ],
  useRule: [
    `1. 滑动窗口从页面右侧打开，固定在页面右侧。如果第一层触发的操作需要调用其他窗口，可新唤出一个浮层，位于第一层上方，但不能完全覆盖，第一层左侧需展现一部分窗口，暗示一、二两层是不同的两个窗口。最多2层窗口。点击左侧空白处窗口组件关闭，点击操作类按钮或链接，窗口组件关闭的同时执行操作。`,
    `2. 没有取消按钮的情况时，窗口组件应提供关闭按钮，按钮样式及状态与普通弹窗关闭按钮一致。`,
    `3. 窗口组件页面布局固化为：标题区（固定）、内容区（固定）、按钮区（可选），查看类场景：窗口组件头部要呈现主体信息，不呈现按钮区；操作类场景：窗口组件要呈现标题和按钮区域，标题命名规范与普通的操作类弹出框一致。`,
    `4. 窗口组件的纵向滚动条只呈现在内容区。`,
    `5. 窗口组件高度连接页头页脚`,
    `6. 咨询反馈的悬浮块呈现在窗口组件的上一层。`,
  ],
  useRule_en: [],
  useSuggestion: [],
  selector: '参见 lv-modal',
  api: [],
  event: [],
  apiDescription: `<a href="/angular/components/modal">参见 Modal 组件 API</a>`,
};
